
/* reset */
html {overflow-y:scroll; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}  /* 初始化标签在所有浏览器中的margin、padding值 */
fieldset,img {border:0 none}  /* 重置fieldset（表单分组）、图片的边框为0*/
dl,ul,ol,menu,li {list-style:none}   /* 重置类表前导符号为onne,menu在HTML5中有效 */
blockquote, q {quotes: none}   /* 重置嵌套引用的引号类型 */
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}  /* 重置嵌套引用*/
input,select,textarea,button {vertical-align:middle; border:0;}  /* 重置表单控件垂直居中*/
button {border:0 none;background-color:transparent;cursor:pointer}  /* 重置表单button按钮效果 */
body {background:#eae8e9; }   /* 重置body 页面背景为白色 white-space: normal; word-break: break-all; word-wrap: break-word;*/
body,th,td,input,select,textarea,button {font-size:14px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666} /* 重置页面文字属性 */
a {color:#666;text-decoration:none}  /* 重置链接a标签 */
a:active, a:hover {text-decoration:none}   /* 重置链接a标签的鼠标滑动效果 */
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}  /* 重置样式标签的样式 */
caption {display:none;}    /* 重置表格标题为隐藏 */
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}    /* 重置table属性 */
img{vertical-align:top}  /* 图片在当前行内的垂直位置 */       

/* 页面设置 */
 
  /* 取消a标签点击后的虚线框 */
a {outline: none;}  
a:active {star:expression(this.onFocus=this.blur());}
 
 /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */
/* 
::selection {color: #fff;background-color: #4C6E78;}    
::-moz-selection {color: #fff;background-color: #4C6E78;} 
*/

.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.hide { display: none; }

.block5 { height: 5px; line-height: 5px; }
.block8 { height: 8px; line-height: 8px; }
.block10 { height: 10px; line-height: 10px; }
.block15 { height: 15px; line-height: 15px; }
.block20 { height: 20px; line-height: 20px; }
.block25 { height: 25px; line-height: 25px; }
.block30 { height: 30px; line-height: 30px; }

.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }

.p95 {width: 95% !important;}
.p45 {width: 45% !important;}

.no-warp {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.page-mainbox {padding: 0 40px;}
.padding20 { padding: 20px; }
.bg-white { background: #fff; }
.bg-nowpage {background: #eae8e9;}

.mui-table {}
.mui-table table {background: #fff;}
.mui-table table thead th {background: #d3cdc7; color: #4b4343; font-weight: normal; font-size: 16px; height: 53px; line-height: 53px;text-align:center;} 
.mui-table table tbody tr:nth-child(even) td { background: #e1f1fb; }
.mui-table .td-cont {padding: 10px; line-height: 20px;}
.mui-table .td-center {text-align: center;}

.mui-operation {padding: 20px 40px 0; text-align: right;}
/*.btn { display: inline-block; min-width: 125px; padding:0 10px; height: 40px; line-height: 40px; color: #fff; text-align: center; font-size: 16px;}
.btn:hover {opacity: .8;}*/
.orange-btn {background: #ea6f02;}
.blue-btn {background: #0577c6;}
.mini-btn {height: 33px; line-height: 33px; font-size: 12px; min-width: 85px;}


/* 登录页 */
.login-page { position:absolute; top:0; left:0; right:0; bottom:30; background: url('../images/login_bg.jpg') center center no-repeat #236aaf; background-size: cover;}
.login-box {width:1000px; position:absolute; top:200px; left:50%; margin-left:-500px;}
.login-banner {position: absolute; top: 0; right: 0; left: 0; bottom: 0; display:none;/*  background: url('../images/login_banner.png') center center no-repeat;  */background-size: contain;}
.login-div {width: 440px; height: 315px; position: absolute; right: 0; top: 0;}
.login-div-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; z-index: 1; opacity: 0.62; border-radius: 10px;}
.login-div-cont {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;}
.login-title {height: 75px; padding: 0 20px;}
.login-title-text {height: 72px; line-height: 72px; text-align: center; border-bottom: 3px solid #1457a7; color: #242527; font-size: 20px;}
.login-title-logo {width: 42px; height: 42px; display: inline-block; background: url('../images/login_logo.png') center center no-repeat; position: relative; top: 15px; margin-right: 15px;}
.login-cont-space {padding: 0 40px 0 20px;}
.login-view-text {display: inline-block; color: #242527; font-size: 14px; height: 38px; line-height: 38px; width: 80px; padding-right: 10px; text-align: right;}
.login-input {height: 30px; line-height: 30px; padding: 3px; border:1px solid #d4d4d4; background: #e6f2fd; width: 260px;}
.login-oper {padding: 0 20px 0 90px;}
.login-submit-btn {height: 36px; line-height: 36px; width: 92px; background: #1968b9; color: #fff; font-size: 16px; text-align: center; border:0; cursor: pointer;}
.login-submit-btn:hover {background: #145eaa;}
.login-remember-checkbox {margin-right: 4px;}
.login-remember {height: 36px; line-height: 36px; color: #575757; font-size: 12px;}

@media screen and (max-width: 960px) {
	.login-title-text {font-size: 16px;}
	.login-box {width:100%; margin-left:0; left:0; top: 20%;}
	.login-div {width: 90%; right: 5%;}
	.login-view-text {width: 60px;}
	.login-input {width: 180px;}
	.login-oper {padding-left: 60px;}

	.layui-layer {width: 100% !important; left: 0; top: 40px !important;}
}

@media screen and (max-width: 355px){
	.login-input {width: 140px;}
	.login-oper {padding-left: 40px;}
}


.header {background: #008def;}
.header .header-logo {padding: 10px 0 0 10px;}
.header .header-logo .header-logo-img {width: 80px; height: 80px;}
.header .header-nav {max-width:85%}
.header .header-nav .nav-link { display: inline-block; float: left; height: 100px; width: 135px; padding-top: 15px; cursor: pointer;}
.header .header-nav .active { background: #0281d9; }
.header .header-nav .nav-link .link-text {color: #fff; text-align: center; display: block; font-size: 14px; line-height: 20px;}
.header .header-nav .nav-link .icon {display: block; width: 50px; height: 50px; margin:  0 auto; background-image: url(../images/header_navs_small.png); background-repeat: no-repeat;}
.header .header-nav .nav-link:hover .icon {opacity: .8;}
.header .header-nav .active:hover .icon {opacity: 1;}

.header .header-nav .nav-link .icon-home { background-position: 0 0; }
.header .header-nav .nav-link .icon-install { background-position: -50px 0; }
.header .header-nav .nav-link .icon-config { background-position: -100px 0; }
.header .header-nav .nav-link .icon-operation { background-position: -150px 0; }
.header .header-nav .nav-link .icon-data { display: block; width: 50px; height: 50px; margin:  0 auto; background-image: url(../images/header_navs_data.png);background-size:50px 50px; background-repeat: no-repeat;}
.header .header-nav .nav-link .icon-history { background-position: -50px -50px; }
.header .header-nav .nav-link .icon-malfunction { display: block; width: 50px; height: 50px; margin:  0 auto; background-image: url(../images/header_navs_fault.png);background-size:50px 50px; background-repeat: no-repeat;}
.header .header-nav .nav-link .icon-status { background-position: -100px -50px; }
.header .header-nav .nav-link .icon-out { background-position:-150px -50px; }
.header .header-nav .nav-link .icon-customer-management { background-position: -200px 0; }

.section {padding-top: 20px;}
.article {width: 60%; background: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;  margin-left: 1%; }
.home-map {position: relative;height:100%;}
.map-div {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

.side {width: 37%; background: #fff; margin-right: 1%; border-radius: 10px;}
.side-div {padding: 15px;}
.home-weather .weather-date {height: 56px; line-height: 56px; padding-left: 10px; padding-right: 40px;}
.home-weather .weather-date b {font-weight:normal;}
.home-weather .weather-info {padding-top: 15px;}
.home-weather .weather-info .info-text { padding-bottom: 5px;}

.home-map-box {
    padding: 3px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
}

.mui-panel {}
.mui-panel .panel-title {height: 39px; line-height: 39px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.mui-panel .panel-content {border:1px solid #c7c7c7; border-top:0; padding: 15px; }
.blue-panel .panel-title {background: #4bb3fc; color: #fff;}
.blue-panel .panel-content { background: #eef7fe; }

.blue-panel2 .panel-title { text-align: center; }
.blue-panel2 .panel-content {background: #fff;}
.label-h25 {line-height: 25px;}

.select {height: 38px; line-height: 38px; background: #fff; border:1px solid #d7d7d7; padding: 3px; color: #4f4f4f; min-width: 100px;}
.autowidth {width:100%};

.side-install{}
.side-install-title .left-title { padding-left: 80px;font-size: 20px; }
.side-install-title .right-title { padding-right: 45px; }
.side-install .all-select {width: 180px;}
.install-list {}
.install-list li {padding: 15px 0 7px; padding-left: 40px; position: relative;}
.install-list li .icon {position: absolute; left: 0; top: 5px; width: 32px; height: 32px; background-image: url(../images/install_list_icons.png); background-repeat: no-repeat;}
.install-list li .icon-concentrator {background-position: 0 0;}
.install-list li .icon-lightpole {background-position: -32px 0;}
.install-list li .icon-potencial {background-position: -64px 0;}
.install-list li .icon-fecha {background-position: -96px 0;}
.isntall-left-content {width: 220px; border-right: 1px solid #d0d0d0;}
.side-install-cont {position: relative;}
.side-install-cont .install-status-img {position: absolute; right: 35px; top: 50%; margin-top: -35px; width: 71px; height: 71px;}

.home-side-card {border-radius: 5px; padding: 15px; color: #fff; position: relative;}
.home-side-card .info-space-row { padding-left:90px;}
.home-side-card .info-main-row {font-size: 18px; line-height: 30px; padding-bottom: 10px;}
.home-side-card .info-center-row { text-align: center;}
.home-side-card .prop-text {display: block; text-align: right; font-size: 20px;}
.home-side-card .icon {position: absolute; top: 15px; left: 15px;}
.home-side-card .important-number {font-size: 24px; color: #f8fa75; font-weight: normal;}
.side-card-green { background: #4c9101; }
.side-card-orange { background: #ff8704; }


.side-emission-reduction {}
.side-emission-reduction .icon-co2 {width: 53px; height: 40px; background: url(../images/icon_co2.png) no-repeat;}
.side-energy-saving .icon-energy {width: 37px; height: 50px; background: url(../images/icon_energy.png) no-repeat;}
.side-energy-saving .icon-level {width: 52px; height: 70px; background: url(../images/icon_level.png) no-repeat;}
.side-energy-saving .important-number { color: #ff0000; }

.chart-home-count { width: 232px; height: 180px; }
/* 历史 */



/* 数据 */
.page-side1,
.data-side { width: 15%; background: #fff;}
.page-article1,
.data-article { width: 84%; background: #fff;}

.page-side1-div,
.data-side-div {padding: 15px;}
.data-side-div .div-title {color: #336699; height: 25px; line-height: 25px; position: relative; padding-left: 25px;}
.data-side-div .div-title .icon-userset {position: absolute; left: 0; top: 0; width:18px; height: 21px; background: url(../images/data_title_icon.png) no-repeat;}
.data-side-div .red-tip { line-height: 20px; background: #ffe7d1; border:1px solid #fdbf88; padding:  0 10px 0 40px; color: #d47c3b; font-size: 12px;}

.level-box {border:1px solid #d2d2d2; background: #f0efef;}
.level-box .level1-head {height: 36px; line-height: 36px; overflow: hidden; padding: 0 15px 0 10px; background: #d2d2d2; font-weight: bold; position: relative;}
.level-box .level2-head {height: 36px; line-height: 36px; overflow: hidden; padding: 0 15px 0 25px; background: #e4e4e4; position: relative;}
.level-box .level3-head {height: 20px; line-height: 20px; overflow: hidden; padding: 0 15px 0 40px; font-size:12px}
.level-box .icon-slide {position: absolute; right: 15px; top: 10px; width: 15px; height: 15px; background: url(../images/level_slide_icon_close.png) no-repeat;}
.level-box .level-head {cursor: pointer;}
.level-box .level-head:hover { opacity: .8; }
.level-box .level-head.active .icon-slide {position: absolute; right: 15px; top: 10px; width: 15px; height: 15px; background: url(../images/level_slide_icon_open.png) no-repeat;}
.level-box .level-cont {display: none;}
.level-box .level3-head.active {color: #4772a0;}
.selected {color: #4772a0;}
.data-side-operation {text-align: center;}

.data-article {}
.data-article .charts-box,
.page-article1 .charts-box { padding: 20px;}
.data-article .charts-div,
.page-article1 .charts-div  {min-height: 500px;}

.date-time-progress {position: relative; padding-top: 45px; background: #fff; padding-left: 100px; padding-right: 50px;}
.date-time-progress .progress-li {float: left; width: 50%; position: relative; padding: 50px 0 60px;}
.date-time-progress .progress-li .li-line {height: 9px; background: #e8e8e8;}
.date-time-progress .progress-li .li-number {position: absolute; right: 0; width: 50px; height: 50px; border-radius: 25px; background: #e8e8e8; top: 50%; margin-top: -25px;}
.date-time-progress .progress-li .number-text {position: absolute; top: 5px; left: 5px; width: 40px; height: 40px; border-radius: 20px; background: #d9d7d7; color: #949494; line-height: 40px; text-align: center; font-size: 16px;}
.date-time-progress .progress-li .name-text {position: absolute; top: 55px; width: 80px; left: -15px; text-align: center;}
.date-time-progress .li-first {width: auto; position: absolute; left: 100px;}
.date-time-progress .active {}
.date-time-progress .active .number-text {background: #2ba7fe; color: #fff;}
.date-time-progress .select {position: absolute; top: 20px; left: 20px;}

.side-oper-add-delete {}
.side-oper-add-delete .oper-add {width: 32px; height: 32px; background: url(../images/icon_add.png) center center no-repeat;}
.side-oper-add-delete .oper-delete {width: 32px; height: 32px; background: url(../images/icon_delete.png) center center no-repeat;}

.side-oper-list {}
.side-oper-list .title {color: #336699; font-size: 16px; height: 30px; line-height: 30px;}
.side-oper-list .li {height: 32px; line-height: 32px; background: #f5f5f5; border:1px solid #f5f5f5; padding: 0 15px; cursor: pointer;}
.side-oper-list .li:nth-child(odd) {background: #e4e4e4; border-color: #e4e4e4;}
.side-oper-list .li.active {background: #ffffff; color: #db7100; border:1px dashed #db7100;}

.form-div {}
.form-div .view {position: relative; padding-left: 80px;}
.form-div .view-title {position: absolute; width: 70px; top: 0; left: 0; line-height: 26px; line-height: 26px; text-align: right;}
.form-div .view-cont {min-height: 26px;}
.form-div .view-cont input.text { height: 20px; line-height: 20px; padding: 3px; background: #e7e7e7; }

.form-div .view120 { padding-left: 120px; }
.form-div .view120 .view-title {width: 110px;}

.form-div .label-check-raido {float: left; position: relative; padding-left: 20px;}
.form-div .label-check-raido .label {height: 26px; line-height: 26px; display: inline-block;}
.form-div .label-check-raido .radio {position: absolute; top: 50%; left: 0; margin-top: -6px;}
.form-div .label-check-raido .radio::before {content: ""; display: inline-block; width: 10px; height: 10px; border:2px solid #0f84c0; background: #fff; border-radius: 7px;}
.form-div .label-check-raido .radio:checked::after {content: ""; display: inline-block; width: 6px; height: 6px; background: #0f84c0; position: absolute; top: 50%; left: 50%; margin-top: -3px; margin-left: -3px; border-radius: 3px;}


.panel-facility-status {width: 22.5%; min-width: 326px; margin-right: 18px;}
.panel-setup {width: 25.4%; min-width: 367px; margin-right: 18px;}
.panel-description {width: 27.7%; min-width: 400px; margin-right: 17px;}
.panel-description .model-title {height: 20px; line-height: 20px; padding-left: 26px; position: relative; color: #ff9038;}
.panel-description .model-title .icon-model { position:absolute; top: 0; left: 0; width: 20px; height: 20px; background: url(../images/icon_model.png) center center no-repeat;}
.panel-zebra-list {}
.panel-zebra-list .li {}
.panel-zebra-list .li .left-text,
.panel-zebra-list .li .right-text {display: inline-block; width: 40%; float: left; height: 34px; line-height: 34px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.panel-zebra-list .li .left-text {color: #252525; padding:0 5%;}
.panel-zebra-list .li .right-text {color: #737373; text-align: right; padding:0 5%;}
.panel-zebra-list .li:nth-child(even) { background: #e8e7e7; }

.panel-farola {width: 20%; min-width: 293px;}
.panel-farola .status-iconbox {text-align: center; padding-top: 60px;}
.panel-farola .status-iconbox img {max-width: 240px; margin: 0 auto;}

.install-page .panels-div {display: flex; display: -webkit-flex; justify-content:space-between; align-items:stretch;}
.install-page .panels-div .mui-panel {}

.panel-facility-status .panel-content,
.panel-setup .panel-content,
.panel-description .panel-content,
.panel-farola .panel-content {height: 280px;}

.install-page .charts-div {background: #fff;}
.install-page .chart-line-three {height: 600px;}
.install-page .chart-bar-line {height: 500px;}

/* form */
.form-view {}
.form-view .item-view {position: relative;}
.form-view .item-view .tag-must {font-style: normal; color: #f00; padding-right: 5px;}
.form-view .item-view input.text,
.form-view .item-view .select { height: 32px; line-height: 32px; border:1px solid #ddd; padding: 3px; width: 100%;  min-width: auto;}
.form-view .item-view .textarea {border:1px solid #ddd; padding: 3px; width: 100%; resize: none; height: 88px; line-height: 20px;}
.form-view .item-view .item-title {position: absolute; top: 0; left: 0; height: 32px; line-height: 32px; text-align: right;}
.form-view .item100 { padding-left: 100px; }
.form-view .item-title { width: 90px;}
.form-view .view-cont { min-height: 32px;}

.form-view .item-li {float: left;}
.form-view .item-group2 .item-li {width: 50%;}
.form-view .item-group3 .item-li {width: 33.33%;}
.form-view .item-group4 .item-li {width: 25%;}
.form-view .item-group5 .item-li {width: 20%;}

/* 选择框 */
.li-check-item {display: inline-block; height: 32px; line-height: 32px;}
.li-check-item .li-text {display: inline-block; padding-right: 10px; margin: 0;}

/* 安装项目 */
.add-dtu-btn { display:inline-block; width:136px; height:136px; background:  url(../images/icon_add_item.png) center center no-repeat;}

/* 重置bootstrap CSS */
.table  tr td {line-height: 20px;}
.table  tr .td-oper-div {display: none;}
.table  tr:hover .td-oper-div {display: block;}
.table thead th {background: #d3cdc7; height: 53px; font-weight: normal; padding: 5px 0; vertical-align: middle; text-align: center;}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: #e1f1fb
}

.home-weather {background: #eef7fe; border:1px solid #b7b8b9; border-radius: 5px; padding-left: 25px;}

/* 地图操作*/
.map-view-box {position: relative;}
.map-oper {position: absolute; z-index: 3; padding:20px; right: 0; top: 0;}
.map-oper .screen-btn {display: inline-block; width: 36px; height:36px; line-height: 36px; 
background: url(../images/view_screen_btn.png) 0 0 no-repeat;}
.map-oper .screen-btn:hover {background-position: 0 -36px;}
.map-oper .all-screen-btn {background-position: -36px 0;}
.map-oper .all-screen-btn:hover {background-position: -36px -36px;}
.all-screen-map {position: relative; left: 0; top: 0; right: 0; bottom: 0px; width: 100%;}
.height-all {left: 0; top: 0; right: 0; bottom: 0px; margin-bottom:12px; width: 100%;}

/* 首页调整*/
.marker-point {display: inline-block; width: 48px; height: 50px; background-repeat: no-repeat}
.marker-point:hover {transform: scale(1.2)}
.marker-blue {background-image: url(../images/marker_blue.png);}
.marker-orange {background-image: url(../images/marker_orange.png);}

.my-map-info {width: 290px; height: 150px; background: #fff; box-shadow:1px 1px 10px 0 rgba(86,155,241, .6);border-top-left-radius:5px;border-top-right-radius:5px;} 
.my-map-info .info-top {border-bottom:1px solid #dcdcdc; position: relative;}
.my-map-info .info-top .title-text {display: inline-block; height: 35px; line-height: 35px; padding-left: 20px; color: #666; }
.my-map-info .info-top .show-more {position: absolute; height: 35px; line-height: 35px; top: 0; right: 10px; color:#1189bd}
.my-map-info .info-bottom img {position: absolute; bottom: -21px; left: 50%; margin-left:-15px;}
.my-map-info .info-cont {padding-top: 25px;}
.my-map-info .info-cont .circle {width: 52px; height: 52px; float: left; position: relative; margin-left: 15px}
.my-map-info .info-cont .circle .icon {position: absolute; width: 46px; height: 46px; top: 3px; left: 3px; background-position: center center; background-repeat: no-repeat}
.my-map-info .info-cont .circle .icon-t1 {background-image: url(../img/map/icon_mc_1.png); }
.my-map-info .info-cont .circle .icon-t2 {background-image: url(../img/map/icon_mc_2.png); }
.my-map-info .info-cont .circle .icon-t3 {background-image: url(../img/map/icon_mc_3.png); }
.my-map-info .info-cont .circle .icon-t4 {background-image: url(../img/map/icon_mc_4.png); }

.isntall-left-content {
	width: auto;
	border-right: none
}
.side-install-title .left-title {
	padding-left: 0;
	width: 100%;
	text-align: center
}
.side-install .all-select {
	width: 150px;
}
/* .home-pie-chart {
	position: absolute;
	top: 10px;
	right: 10px;
} 
position:relative;top:-20px;
*/

.my-container-fluid {}

.my-container-fluid .my-row {position: relative; padding-right: 500px;}
.my-container-fluid .my-row .my-col-lg-3 {position: absolute; width: 480px; top: 0; right: 0;}
.side-card-green {background-color: #2cd2bc;}
.side-card-orange {background-color: #f3cb13;}
.aside-weather {background: #eef7fe; padding: 15px; border-radius: 10px;}

@media (max-width: 1200px) { 
	.my-container-fluid .my-row {padding-right: 0;}
	.my-container-fluid .my-row .my-col-lg-3 {position: unset; width: 100%; top:unset; right: unset;}
}

.none_div{height:100px;line-height: 100px;text-align:center;}
